<div class="ui stackable grid">
  <div class="row">
    <div class="eight wide column">
      <h2 class="ui header">
        {{t 'View Orders'}}
      </h2>
    </div>
    <div class="eight wide {{unless this.device.isMobile 'right aligned'}} column pr-0">
      <div class="{{if this.device.isMobile 'ui padded grid'}}">
        <div class="row">
          <UiDropdown @class="compact selection eight wide column">
            <div class="default text">
              {{t 'Export As'}}
            </div>
            <i class="dropdown icon"></i>
            <div class="menu">
              <div class="item {{if this.isLoadingpdf 'loading'}}" role="button" data-value="pdf" {{action 'export' 'pdf'}}>
                <i class="file pdf outline icon"></i>
                {{t 'PDF'}}
              </div>
              <div class="item {{if this.isLoadingcsv 'loading'}}" role="button" data-value="csv" {{action 'export' 'csv'}}>
                <i class="file excel outline icon"></i>
                {{t 'CSV'}}
              </div>
            </div>
          </UiDropdown>
          <UiDropdown @class="selection eight wide column">
            {{#if (eq this.router.currentRoute.queryParams.filter 'discount')}}
              <div class="item">
                <i class="dollar icon"></i>
                {{t 'Filter by Discount'}}
              </div>
            {{else if (eq this.router.currentRoute.queryParams.filter 'date')}}
              <div class="item">
                <i class="calendar outline icon"></i>
                {{t 'Filter by Date'}}
              </div>
            {{else}}
              <div class="default text">
                {{t 'Showing all the records'}}
              </div>
            {{/if}}
            <i class="dropdown icon"></i>
            <div class="menu">
              <div class="item" data-value="date" role="button" {{action 'orderFilter' 'date'}}>
                <i class="calendar outline icon"></i>
                {{t 'Filter by Date'}}
              </div>
              <div class="item" data-value="discount" role="button" {{action 'orderFilter' 'discount'}}>
                <i class="dollar icon"></i>
                {{t 'Filter by Discount'}}
              </div>
              <div class="item" data-value="remove" role="button" {{action 'orderFilter' 'all'}}>
                <i class="ban icon"></i>
                {{t 'Remove Filters'}}
              </div>
            </div>
          </UiDropdown>
        </div>
      </div>
    </div>
  </div>
{{#if (eq this.router.currentRoute.queryParams.filter 'date')}}
    {{#if this.device.isMobile}}
      <div class="sixteen wide column filter-date-mobile-session">
        <div class="ui grid">
          <div class="eight wide column">
            <label class="required ui header" for="start_date">{{t 'Starts'}}</label>
            <Widgets::Forms::DatePicker
              @type="text"
              @name="start_date"
              @value={{this.start_date}}
              @rangePosition="start"
              @onChange={{action "onChangeStartDate"}}
              @format="YYYY-MM-DD"
              @placeholder="MM/DD/YYYY"/></div>
          <div class="eight wide column end-date-session">
              <label class="required ui header" for="end_date">{{t 'Ends'}}</label>
              <Widgets::Forms::DatePicker
                @class="end-date-session"
                @type="text"
                @name="end_date"
                @value={{this.end_date}}
                @rangePosition="end"
                @onChange={{action "onChangeEndDate"}}
                @format="YYYY-MM-DD"
                @placeholder="MM/DD/YYYY"/>
          </div>
        </div>
      </div>
    {{else}}
      <div class="right floated sixteen wide column">
        <div class="ui grid">
          <div class="row">
            <div class="nine wide column"></div>
            <div class="seven wide column">
              <div class="ui grid">
                <div class="row">
                  <div class="eight wide column">
                    <label class="required ui header" for="start_date">{{t 'Starts'}}</label>
                    <Widgets::Forms::DatePicker
                      @type="text"
                      @name="start_date"
                      @value={{this.start_date}}
                      @rangePosition="start"
                      @onChange={{action "onChangeStartDate"}}
                      @format="YYYY-MM-DD"
                      @placeholder="YYYY-MM-DD"/>
                  </div>
                  <div class="eight wide column">
                    <label class="required ui header" for="end_date">{{t 'Ends'}}</label>
                    <Widgets::Forms::DatePicker
                      @type="text"
                      @name="end_date"
                      @value={{this.end_date}}
                      @rangePosition="end"
                      @onChange={{action "onChangeEndDate"}}
                      @format="YYYY-MM-DD"
                      @placeholder="YYYY-MM-DD"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    {{/if}}
  {{/if}}
  <div class="row">
    <div class="eight wide column">
      <TabbedNavigation @isNonPointing={{true}}>
        <LinkTo @route="events.view.tickets.orders.list" @model="completed" class="item">
          {{t 'Completed'}}
        </LinkTo>
        <LinkTo @route="events.view.tickets.orders.list" @model="placed" class="item">
          {{t 'Placed'}}
        </LinkTo>
        {{#if this.authManager.currentUser.isAnAdmin}}
          <LinkTo @route="events.view.tickets.orders.list" @model="pending" class="item">
            {{t 'Pending'}}
          </LinkTo>
        {{/if}}
        <LinkTo @route="events.view.tickets.orders.list" @model="expired" class="item">
          {{t 'Expired'}}
        </LinkTo>
        <LinkTo @route="events.view.tickets.orders.list" @model="cancelled" class="item">
          {{t 'Cancelled'}}
        </LinkTo>
        <LinkTo @route="events.view.tickets.orders.list" @model="all" class="item">
          {{t 'All'}}
        </LinkTo>
      </TabbedNavigation>
    </div>
  </div>
  <div class="row">
    {{outlet}}
  </div>
</div>
